import React, {useEffect, useRef, Suspense, useState} from "react";
import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import {store} from "../store/store";
import {message, Spin} from "antd";
import {connect} from "react-redux";
import Loading from "../component/Loading/Loading";
import AddPersonalCircle from "../views/AddPersonalCircle/AddPersonalCircle";
import PageLoading from "../component/PageLoading/PageLoading";
// 懒加载
const HomePage = React.lazy(() => import("../views/HomePage/HomePage"))
const PageCover = React.lazy(() => import("../views/PageCover/PageCover"))
const HomeSystem = React.lazy(() => import("../views/HomeSystem/HomeSystem"))

const FrontPage = React.lazy(() => import("../views/FrontPage/FrontPage"))
const RearHome = React.lazy(() => import("../views/RearHome/RearHome"))
const BlogType = React.lazy(() => import("../views/BlogType/BlogType"))
const UserList = React.lazy(() => import("../views/UserList/UserList"))
const BlogContent = React.lazy(() => import("../views/BlogContent/BlogContent"))
const SystemConfig = React.lazy(() => import("../views/SystemConfig/SystemConfig"))
const AddBlog = React.lazy(() => import("../views/AddBlog/AddBlog"))
const LiveRecord = React.lazy(() => import("../views/LiveRecord/LiveRecord"))
const NoteList = React.lazy(() => import("../views/NoteList/NoteList"))
const BlogsComment = React.lazy(() => import("../views/BlogsComment/BlogsComment"))
const BlogArticle = React.lazy(() => import("../views/BlogArticle/BlogArticle"))
// const AddPersonalCircle = React.lazy(() => import("../views/AddPersonalCircle/AddPersonalCircle"))
const PersonalCircleList = React.lazy(() => import("../views/PersonalCircleList/PersonalCircleList"))
const MessageBoard = React.lazy(() => import("../views/MessageBoard/MessageBoard"))
const DataStatistics = React.lazy(() => import("../views/DataStatistics/DataStatistics"))

//鉴权
function AuthRoute({Children}) {
    // 获取token
    const tokenStr = store.getState().UserRedux.token
    const userRole = store.getState().UserRedux.user ? store.getState().UserRedux.user.userRole : ''
    // 如果token存在 直接正常渲染
    if (tokenStr) {
        if (userRole === '0') {
            return <Children></Children>
        } else {
            return <Navigate to='/HomePage' replace/>
        }
    }
    // 如果token不存在，重定向到登录路由
    else {
        return <Navigate to='/HomePage' replace/>
    }
}

function IsLogin() {
    // 获取token
    const tokenStr = store.getState().UserRedux.token
    // 如果token存在 直接正常渲染
    if (!tokenStr) {
        return <HomePage></HomePage>
    }
    // 如果token不存在，重定向到登录路由
    else {
        return <Navigate to='/HomeSystem' replace/>
    }
}


const IndexRoter = (props) => {
    const audioUrl = process.env.REACT_APP_URL + '/audio/背景音乐.mp3'
    const [audioState, setAudioState] = useState(true)
    const audioRef = useRef()

    // 播放暂停
    useEffect(() => {
        if (!audioState) return
        if (props.playMusic) {
            audioRef.current.play()
        } else {
            audioRef.current.pause()
        }
    }, [props.playMusic])

    useEffect(() => {
        audioRef.current.onerror = function () {
            message.warning('背景音乐加载失败，请联系管理员')
            setAudioState(false)
        };

    }, [])

    return (
        <BrowserRouter>
            <Suspense fallback={<PageLoading></PageLoading>}>
                <Routes>
                    <Route path="/PageCover" element={<PageCover></PageCover>}></Route>
                    <Route path="/HomeSystem" element={<AuthRoute Children={HomeSystem}></AuthRoute>}>
                        <Route path="" element={<RearHome/>}/>
                        <Route path="home" element={<RearHome/>}/>
                        <Route path="blogType" element={<BlogType/>}/>
                        <Route path="blogContent" element={<BlogContent/>}/>
                        <Route path="UserList" element={<UserList/>}/>
                        <Route path="SystemConfig" element={<SystemConfig/>}/>
                        <Route path="addBlog" element={<AddBlog/>}/>
                        <Route path="BlogsComment" element={<BlogsComment/>}/>
                        <Route path="AddPersonalCircle" element={<AddPersonalCircle/>}/>
                        <Route path="PersonalCircleList" element={<PersonalCircleList/>}/>
                    </Route>
                    <Route path="/HomePage" element={<HomePage></HomePage>}>
                        <Route path="" element={<FrontPage/>}/>
                        <Route path="frontPage" element={<FrontPage/>}/>
                        <Route path="liveRecord" element={<LiveRecord/>}/>
                        <Route path="NoteList" element={<NoteList/>}/>
                        <Route path="BlogArticle" element={<BlogArticle></BlogArticle>}/>
                        <Route path="MessageBoard" element={<MessageBoard/>}/>
                        <Route path="DataStatistics" element={<DataStatistics/>}/>
                    </Route>
                    <Route path="*" element={<Navigate to='/HomePage'></Navigate>}></Route>
                </Routes>
            </Suspense>
            <div>
                <audio ref={audioRef} src={audioUrl}></audio>
            </div>
            <Loading></Loading>
        </BrowserRouter>
    );
};

const mapStoreToProps = (state) => {
    return {
        playMusic: state.MyFloatButtonRedux.playMusic
    }
}
export default connect(mapStoreToProps)(IndexRoter)
